<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单排单</title>
    <link rel="stylesheet" href="/elementui/index.css">

</head>
<body>
    <div id="app1">
        <label>选择排单：</label>
        <template>
            <el-select v-model="value" placeholder="请选择排单">
                <el-option
                        v-for="item in options"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </template>
        <el-table
                :data="orders"
                style="width: 100%;height: 400px"
                v-loading="loading"
                :default-sort = "{prop: 'id', order: 'descending'}"
        >
            <el-table-column
                    prop="id"
                    label="序号"
                    sortable
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="orderId"
                    label="订单编号"
                    sortable
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="orderType"
                    label="订单类型">
            </el-table-column>
            <el-table-column
                    prop="productPlanNo"
                    label="生产计划编号">
            </el-table-column>
            <el-table-column
                    prop="productionName"
                    label="责任产线">
            </el-table-column>
            <el-table-column
                    prop="number"
                    label="生产数量">
            </el-table-column>
            <el-table-column
                    prop="productPlanTime"
                    label="生产开始日期">
            </el-table-column>
            <el-table-column
                    prop="productPlanOvertime"
                    label="结束生产日期">
            </el-table-column>
            <el-table-column
                    prop="remark"
                    label="备注">
            </el-table-column>
            <el-table-column
                    prop="productStatus"
                    label="订单状态">
                <template slot-scope="scope">

                    <el-button size="small" type="success" v-if="scope.row.productStatus =='1'">已排单</el-button>
                    <el-button size="small" type="warning" v-else>未排单</el-button>

                </template>
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="操作">
                <template slot-scope="scope">
                    <el-button size="small" type="primary" @click="showDialog(scope.row)"  v-if="scope.row.productStatus !='1'">设置排单</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                layout="total,prev, pager, next, jumper"
                :total="total">
        </el-pagination>



        <el-dialog title="确认排单" :visible.sync="dialogFormVisible">
            <el-form :inline="true" :model="form">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label=" 订单编号：">
                            <el-input v-model="form.orderId" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="生产线：" >
                            <el-select v-model="form.productLineId" placeholder="请选择活动区域">
                                <el-option
                                        v-for="item in form.production"
                                        :key="item.id"
                                        :label="item.productionName"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label=" 生产编号：" >
                            <el-input v-model="form.productPlanNo" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label=" 生产时间："   >
                            <div class="block">
                                <span class="demonstration">默认</span>
                                <el-date-picker
                                        v-model="form.productPlanTime"
                                        type="date"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </div>

                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="subUpdate">确 定</el-button>
            </div>
        </el-dialog>

    </div>



    <script src="/vue/vue.js"></script>
    <script src="/elementui/index.js"></script>
    <script src="/qs/qs.min.js"></script>
    <script src="/axios/axios.min.js"></script>
<script>
    let app1 = new Vue({
        el:'#app1',
        data(){
            return{
                options: [{
                    value: '0',
                    label: '请选择排单'
                }, {
                    value: '1',
                    label: '按日期排单'
                }, {
                    value: '2',
                    label: '按产能排单'
                }],
                value: '',
                current:1,
                orders:[],
                total:null,//页码
                currentPage:null,//当前页数
                pageSize:null,
                dialogFormVisible:false,
                form:{
                    id:'',
                    orderId:'',
                    production:[],
                    productPlanNo:'',
                    productPlanTime:'',
                    productLineId:'',
                    productStatus:-1
                }


            }
        },
        methods:{
            //查询数据
            findSortPage(){
                axios.get('/orders/sort?current='+this.current).then(res=>{
                    this.orders = res.data.data.records
                    this.pageSize = res.data.data.size
                    this.total = res.data.data.total
                    this.currentPage = res.data.data.current
                })
            },
            //当页数改变时
            handleCurrentChange(currentPage){
                let _this = this
                this.current = currentPage
                this.findSortPage()
            },
            //弹出模态框
            showDialog(row){
                this.form.id = row.id
                this.form.orderId = row.orderId
                this.form.productPlanNo = row.productPlanNo
                axios.get('/productionLines').then(res=>{
                    this.form.production = res.data.data
                    console.log( this.form.production);
                })
                this.dialogFormVisible = true;
            },
            //提交修改
            subUpdate(){
                this.form.productPlanTime = this.toDealTime(this.form.productPlanTime)
                this.form.productStatus =1
                axios.put('/order?msg=1',this.form).then(res=>{
                    if (res.data.state==1){
                        this.dialogFormVisible = false
                        this.findSortPage()
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                    }
                })
            },
            //转换时间
            toDealTime(dealTime) {
                if (dealTime != null) {
                    let y = dealTime.getFullYear();
                    let m = dealTime.getMonth() + 1;
                    m = m < 10 ? ('0' + m) : m;
                    let d = dealTime.getDate();
                    d = d < 10 ? ('0' + d) : d;
                    let h = dealTime.getHours();
                    h = h < 10 ? ('0' + h) : h;
                    let minute = dealTime.getMinutes();
                    minute = minute < 10 ? ('0' + minute) : minute;
                    let second = dealTime.getSeconds();
                    second = second < 10 ? ('0' + second) : second;
                    return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
                }
            }

            },
        mounted(){
            this.findSortPage()
        }
    })
</script>
</body>
</html>